<template>
    <view class="analysis" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="28天打卡"></nav-bar>
        <view class="top-bg">
            <view class="img1">
                <u--image :showLoading=" true " @click="goTo()"
                    src="http://oss.antaimedical.com/images/pro/2024/12/67613383e4b0d615350f30e3spweOivQSQHx0bd41d6bae5740d658dd3cfb967c5916.png"
                    width="512rpx" height="200rpx" mode="widthFix"></u--image>
            </view>
            <button class="img2" open-type="share" plain>
                <u--image :showLoading=" true "
                    src="http://oss.antaimedical.com/images/pro/2024/12/67613415e4b0d615350f30e5XYUip90HDrkN61b3444913d3ec843bf11146fdd63850.png"
                    width="64rpx" height="64rpx" mode="widthFix"></u--image>
            </button>
        </view>
        <view class="greeting">
            {{ userInfo.name }}，您好<br>
            请收下您的<br>
            28天打卡分析报告<br>
        </view>
        <view class="container">
            <view class="card mbScore">
                <view class="top-img">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/676133e2e4b0be9d444233f2FweccCesgN8Ie978ba1f8fe588e913777013dc6205f3.png"
                        width="240rpx" height="252rpx" mode="widthFix"></u--image>
                </view>
                <view class="title">
                    {{cardPromptData.prompt}}
                </view>
                <view class="garage">
                    <circularProgress bgColor="#eeeffc" :isBgShow=" true " :lineWidth=" 14 " boxWidth="160"
                        boxHeight="160" progressColor="#D6DAFF" fontColor="#5677fc" gradualColor="#545DDE"
                        :fontShow=" false " :percent=" (analysisData.currentScore / 15) * 100 ">
                        <view class="details">
                            <view>
                                {{ analysisData.currentScore }}
                            </view>
                            <view class="text1">弹性分数</view>
                        </view>
                    </circularProgress>
                </view>
                <view class="bottom-box">
                    <view class="icon" @click="getPunchCardPrompt(2)">
                        <u--image :showLoading=" true "
                            src="http://oss.antaimedical.com/images/pro/2024/12/676141b7e4b0be9d444233f4xv6cpLLNyD2d9fe3aacce9454620f0e7c15785250891.png"
                            width="32rpx" height="32rpx" mode="widthFix"></u--image>
                    </view>
                    <text>您的代谢弹性分数相比于上周的（{{ analysisData.beforeScore }}），
                        有所{{ analysisData.beforeScore > analysisData.currentScore ? '下降' : '提升' }}</text>
                </view>
                <view class="hint" @click="navigateTo(cardPromptData.url)">{{cardPromptData.title}}</view>
            </view>
            <view class="card" :class=" { 'bg1': analysisData.currentScore < 5 } ">
                <view class="title">
                    清晨的代谢等级是否理想
                </view>
                <view class="content">
                    <text>{{ analysisData.currentScore > 5 ? '理想' : '不理想' }}</text>
                    <u--image :showLoading=" true " v-if="analysisData.currentScore > 5"
                        src="http://oss.antaimedical.com/images/pro/2024/12/67614437e4b0d615350f30e6CKUqTFeAUHKb2481b801fe478adff9e579c21fc8168d.png"
                        width="48rpx" height="48rpx" mode="widthFix"></u--image>
                    <u--image :showLoading=" true " v-else
                        src="http://oss.antaimedical.com/images/pro/2024/12/6762a238e4b0be9d444233f8XzkhnHAKdv8D776a0b9a6c472a4e820b028c0ab7d670.png"
                        width="48rpx" height="48rpx" mode="widthFix"></u--image>
                </view>
                <view class="bottom-box">
                    <view class="icon" @click="getPunchCardPrompt(3)">
                        <u--image :showLoading=" true "
                            src="http://oss.antaimedical.com/images/pro/2024/12/676141b7e4b0be9d444233f4xv6cpLLNyD2d9fe3aacce9454620f0e7c15785250891.png"
                            width="32rpx" height="32rpx" mode="widthFix"></u--image>
                    </view>
                    <text>清晨的能量供应来源于碳水的比例平均值为{{ analysisData.ch0RateAvgVal * 100 }}%</text>
                </view>
            </view>
            <view class="card meal">
                <view class="title">
                    根据统计，您的餐后测量结果如下
                </view>
                <view class="meal-box">
                    <view class="item">
                        <view class="title">
                            <u--image :showLoading=" true "
                                src="http://oss.antaimedical.com/images/pro/2024/12/67614babe4b0d615350f30e7d1JcxmR3V48oaa2470706d483449d666f00366a82e31.png"
                                width="60rpx" height="60rpx" mode="widthFix"></u--image>
                            <text>早餐后</text>
                        </view>
                        <view class="con">
                            <view class="box">
                                <text class="text1">总次数</text>
                                <text class="text2">{{ analysisData.breakfastCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标次数</text>
                                <text class="text2">{{ analysisData.breakfastRateCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标频率</text>
                                <text class="text2">{{ analysisData.breakfastRate }}%</text>
                            </view>
                        </view>
                    </view>
                    <view class="item">
                        <view class="title">
                            <u--image :showLoading=" true "
                                src="http://oss.antaimedical.com/images/pro/2024/12/67614bc4e4b0be9d444233f5qGdn2K9SRMRN7823e15ea6c30632e1fcded40ad04a20.png"
                                width="60rpx" height="60rpx" mode="widthFix"></u--image>
                            <text>午餐后</text>
                        </view>
                        <view class="con">
                            <view class="box">
                                <text class="text1">总次数</text>
                                <text class="text2">{{ analysisData.lunchCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标次数</text>
                                <text class="text2">{{ analysisData.lunchRateCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标频率</text>
                                <text class="text2">{{ analysisData.lunchRate }}%</text>
                            </view>
                        </view>
                    </view>
                    <view class="item">
                        <view class="title">
                            <u--image :showLoading=" true "
                                src="http://oss.antaimedical.com/images/pro/2024/12/67614bcde4b0be9d444233f6YzBYmUj3yL5b028bd30c5c4134d443700066e8688ebb.png"
                                width="60rpx" height="60rpx" mode="widthFix"></u--image>
                            <text>晚餐后</text>
                        </view>
                        <view class="con">
                            <view class="box">
                                <text class="text1">总次数</text>
                                <text class="text2">{{ analysisData.dinnerCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标次数</text>
                                <text class="text2">{{ analysisData.dinnerRateCount }}</text>
                            </view>
                            <view class="box">
                                <text class="text1">达标频率</text>
                                <text class="text2">{{ analysisData.dinnerRate }}%</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <u-popup :show=" questionPopup " @close="questionPopup = false" :round=" 30 " closeable>
            <view class="popup-content">
                <view class="title">{{ promptData.title }}</view>
                <view class="con-box">
                    <view class="item">
                        <view class="text">{{ promptData.prompt }}</view>
                    </view>

                </view>
                <view class="btn" @click="questionPopup = false">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import {
    getAnalyseReport,
    getPunchCardPrompt,
} from '@/api/index.js'
import circularProgress from '@/components/circularProgress/circularProgress.vue'
export default {
    components: {
        circularProgress,
    },
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),
            questionPopup: false,
            analysisData: {
                currentScore: 0,
            },
            promptData: {
                title:'',
                prompt:'',
            },
            cardPromptData:{
                title:'',
                prompt:'',
            }
        }
    },

    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    mounted () {
        this.getAnalyseReport()
    },
    methods: {
        getAnalyseReport () {
            getAnalyseReport({ userId: this.userInfo.userId }).then((res) => {
                this.analysisData = res.data
                getPunchCardPrompt({ score: this.analysisData.currentScore }).then((res) => {
                    this.cardPromptData = res.data
                })
            })
        },
        goTo () {
            uni.navigateTo({
                url: '/pagesB/clockInDay/shareActivity'
            })
        },
        navigateTo (url) {
            uni.navigateTo({
                url: url
            })
        },
        getPunchCardPrompt (val) {
            switch (val) {
                case 2:
                    this.promptData = {
                        title: '提示',
                        prompt: '任何健康生活方式，都要以可持续为前提。而可持续性主要体现在你的睡眠是否充足和作息是否规律。此外，还体现在您摄入的食物的种类是否对身体有益和摄入的热量是否合理且稳定。最后，便是你的运动量是否合理。',
                    }
                    this.questionPopup = true
                    break;
                case 3:
                    this.promptData = {
                        title: '提示',
                        prompt: '清晨的代谢等级体现了您的身体经过一整晚的新陈代谢后，您身体的能量供应状态——这个数值对于判断一个人的健康状态十分重要的。理论上您会获得一个相对较低的等级（等级2~3）——这意味，您的身体的能量来源已经从燃烧碳水切换为燃烧脂肪——这对于一个代谢不健康的人而言是很难做到的。',
                    }
                    this.questionPopup = true
                    break;
            }

        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    },
    onShareAppMessage () {
        return {
            title: '28天打卡分析报告',
            path: `/pagesB/clockInDay/analysis`,
            imageUrl: 'http://oss.antaimedical.com/images/pro/2024/12/676133e2e4b0be9d444233f2FweccCesgN8Ie978ba1f8fe588e913777013dc6205f3.png'
        }
    },
    onShareTimeline () {
        return {
            title: '28天打卡分析报告',
            path: `/pagesB/clockInDay/analysis`,
            imageUrl: 'http://oss.antaimedical.com/images/pro/2024/12/676133e2e4b0be9d444233f2FweccCesgN8Ie978ba1f8fe588e913777013dc6205f3.png',
        }
    },
}
</script>
<style lang="scss" scoped>
.analysis {
    background: linear-gradient(360deg, #FFFEFE 0%, #545DDE 90%);
    min-height: 100vh;
}

.top-bg {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 375rpx;
    background: url('http://oss.antaimedical.com/images/pro/2024/12/67628e26e4b0be9d444233f78OmtaququHGE78b1e46cebf43a1ca5299570e49ec957.png') no-repeat;
    background-size: 414rpx 100%;
    background-position: right 0 top 0;
    padding-top: 52rpx;

    .img2 {
        margin-right: 32rpx;
        background-color: transparent;
        border: none;
        width: 64rpx;
        height: 64rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

.greeting {
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 40rpx;
    color: #FFFFFF;
    text-align: left;
    padding-left: 64rpx;
    margin-top: -70rpx;
}

.container {
    padding: 40rpx 32rpx;
    width: 100%;
    padding-bottom: 80rpx;

    .bg1 {
        background: linear-gradient(360deg, #FFFFFF 80%, #FFEBD9 100%) !important;
    }

    .card {
        position: relative;
        width: 100%;
        padding: 32rpx;
        margin-bottom: 32rpx;
        border-radius: 48rpx;
        background: linear-gradient(360deg, #FFFFFF 80%, #D7FFEB 100%);

        .title {
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
            text-align: left;
        }

        .content {
            padding: 34rpx 0 18rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
            text-align: left;
        }

        .bottom-box {
            padding: 32rpx 0;
            border-top: 2rpx solid #E6EBF5;
            text-align: left;
            display: flex;

            .icon {
                margin-top: 6rpx;
                margin-right: 16rpx;
            }

            text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                text-align: left;
            }
        }

    }

    .mbScore {
        padding-bottom: 62rpx;
        background: linear-gradient(360deg, #FFFFFF 80%, #FFFFD7 100%);

        .top-img {
            position: absolute;
            right: 24rpx;
            top: -100rpx;
        }

        .hint {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 62rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #5F6BE5;
            background: #F4F4F4;
            border-radius: 0rpx 0rpx 32rpx 32rpx;
        }
    }

    .meal {
        background: linear-gradient(360deg, #FFFFFF 80%, #F9E7FF 100%);

        .meal-box {
            .item {
                margin-top: 48rpx;

                .title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-right: 24rpx;
                    width: 184rpx;
                    height: 48rpx;
                    background: #F6F6F6;
                    border-radius: 198rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    text-align: left;

                    text {
                        margin-left: 6rpx;
                    }
                }

                .con {
                    margin-top: 32rpx;
                    padding: 24rpx 64rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #F6F6F6;
                    border-radius: 24rpx 24rpx 24rpx 24rpx;

                    .box {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .text1 {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #666666;
                            text-align: left;
                        }

                        .text2 {
                            font-family: PingFang SC, PingFang SC;
                            font-weight: 600;
                            font-size: 32rpx;
                            color: #333333;
                            text-align: left;
                            margin-top: 16rpx;
                        }
                    }
                }
            }
        }
    }
}

.garage {
    width: 320rpx;
    height: 320rpx;
    margin: 58rpx auto 50rpx;
    position: relative;

    .uni-ec-canvas {
        width: 100%;
        height: 100%;
    }

    .details {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 500;
        font-size: 72rpx;
        font-family: PingFangSC-Medium, PingFang SC;

        .text1 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;

        }
    }
}

.popup-content {
    padding: 32rpx;

    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
    }

    .con-box {
        padding: 32rpx 48rpx;
        background: #f2f3fd;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        margin-top: 48rpx;
        min-height: 320rpx;

        .item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 28rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
                text-align: left;
            }

            .num {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }
    }

    .btn {
        width: 100%;
        height: 88rpx;
        background: #545DDE;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;

    }
}
</style>
